<template>
  <el-form :model="form" ref="taskForm">
    <el-form-item label="选择平台">
      <el-select v-model="form.platformName" placeholder="请选择平台">
        <el-option
            v-for="platform in platforms"
            :key="platform.name"
            :label="platform.name"
            :value="platform.name"
        />
      </el-select>
    </el-form-item>

    <el-form-item v-if="selectedPlatform" label="选择功能">
      <el-select v-model="form.functionName" placeholder="请选择功能">
        <el-option
            v-for="func in selectedPlatform.functions"
            :key="func.type"
            :label="func.name"
            :value="func.name"
        />
      </el-select>
    </el-form-item>

    <el-form-item v-if="selectedFunction" label="输入内容">
      <el-input
          v-if="selectedFunction.type === 'noteId'"
          v-model="form.inputData"
          placeholder="输入笔记ID"
      />
      <el-input
          v-if="selectedFunction.type === 'keyword'"
          v-model="form.inputData"
          placeholder="输入关键字"
      />
<!--      <el-input-->
<!--          v-if="selectedFunction.type === 'userId'"-->
<!--          v-model="form.inputData"-->
<!--          placeholder="输入用户ID"-->
<!--      />-->
       <el-input
          v-if="selectedFunction.type === 'posterId'"
          v-model="form.inputData"
          placeholder="输入发布者Id"
      />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref,watch,computed } from 'vue'

const platforms = [
  {
    name: '小红书',
    functions: [
      { name: '根据ID爬取', type: 'noteId', apiFile: 'xhs', apiFunction: 'createTaskForId' },
      { name: '根据关键字爬取', type: 'keyword', apiFile: 'xhs', apiFunction: 'createTasksForKeyword' },
      // { name: '根据用户ID爬取用户所有笔记内容', type: 'userId', apiFile: 'xhs', apiFunction: 'getIndexData'},
      { name: '根据发布者id爬取所有笔记', type: 'posterId', apiFile: 'xhs', apiFunction: 'createTasksForPosterId' }
    ]
  },
  {
    name: '东方财富股吧',
    functions: [
      { name: '根据ID爬取', type: 'noteId', apiFile: 'xhs', apiFunction: 'createTaskForId' },
      { name: '根据关键字爬取', type: 'keyword', apiFile: 'xhs', apiFunction: 'createTasksForKeyword' },
      { name: '根据用户ID爬取用户所有笔记内容', type: 'userId', apiFile: 'xhs', apiFunction: 'getIndexData' }
    ]
  },
  // 其他平台...
]
const selectedPlatform = computed(() => {
  return platforms.find(platform => platform.name === form.value.platformName) || null;
});
const selectedFunction = computed(() => {
  return selectedPlatform.value
      ? selectedPlatform.value.functions.find(func => func.name === form.value.functionName) || null
      : null;
});
const form = ref({
  platformName: null,
  functionName: null,
  inputData: ''
})

const emit = defineEmits(['update:form'])

watch(form, (newForm) => {
  emit('update:form',  {
    ...newForm,
    function: selectedFunction.value
  })
}, { deep: true })
</script>

<style scoped>
/* 这里可以添加子组件的样式 */
</style>
